<template>
  <r-view class="view-home bg-gray">
    <r-slider :list="list"/>
    <r-search/>
    <div class="panel-label">
      <h2>热门标签<small>更多</small></h2>
      <div class="list-labels">
        <span class="active">精选</span>
        <span>最近上新</span>
        <span>家自在</span>
        <span>有机专选</span>
        <span>运动专选</span>
      </div>
    </div>
    <r-products :list="products"/>
  </r-view>
</template>
<script>
import banner from '../../resource/data/banner'
import products from '../../resource/data/products'
import RSlider from 'src/components/r-slider'
import RImage from 'src/components/r-image'
import RRibbon from 'src/components/r-ribbon'
import src from '../../resource/images/1.png'
import RSearch from 'src/components/r-search'
import RProducts from 'src/components/r-products'
import RView from 'src/components/r-view'
import API from 'src/api'
export default {
  name: 'view-home',
  components: {
    RSlider,
    RImage,
    RRibbon,
    RSearch,
    RProducts,
    RView
  },
  data () {
    return {
      list: [...banner],
      products,
      src
    }
  },
  created () {
    this.getBanners()
    // this.getList()
  },
  methods: {
    getBanners () {
      const payload = {index: 1, size: 5}
      this.axios.post(API.Home.Banners, payload).then(console.log).catch(console.error)
    },
    getList () {
      this.axios.post(API.Home.Categories, {index: 1, size: 10})
    }
  }
}
</script>
<style lang="scss">
  @import '../styles/index';

  .view-home {
    padding-bottom: $height-nav;

    .panel-label {
      padding: 0 12px;
      background-color: white;

      h2 {
        font-size: 16px;
        font-weight: 400;
        line-height: 32px;
        margin: 0;
        @extend %flex-justify;

        small {
          color: #999;
          font-size: 14px;
        }
      }
    }

    .list-labels {
      font-size: 15px;
      line-height: 30px;
      color: #666;
      @extend %flex-justify;

      .active {
        color: #000;
        font-weight: 600;
      }
    }
  }
</style>
